<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="ihis.model.*" %>
<%@ page import="ihis.core.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@page import="ihis.tms.client.IHISTMSClient"%>

<%@ include file="filter.jsp" %>
    
<%
	filter.setStartDate(null);
	filter.setEndDate(null);
	PredictedCurveReport report = (PredictedCurveReport) core.getReport(IHISConstants.REPORT_PROJECT_SCHEDULE, filter);
	List<PredictedCurve> values = report.getValueList();	
%>


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Predicted Curve Report</title>
    <link rel="stylesheet" href="script/jquery.mobile-1.0a4.1.min.css"/>
    <link rel="stylesheet" href="script/layout.css"/>
    <link rel="stylesheet" href="script/ihis.css"/>
    <script src="script/jquery-1.6.min.js"></script>
    <script src="script/jquery.flot.min.js"></script>
    <script src="script/jquery.flot.resize.min.js"></script>
    <script src="script/ihis.schedule.js"></script>
    <script src="script/jquery.mobile-1.0a4.1.min.js"></script>
       <style type="text/css">
    html, body {
        height: 100%; /* make the percentage height on placeholder work */
    }
    </style>
</head>

<body>
	<div id="predictedCurvePage" data-role="page" style="height: 100%">
		<div data-role="header" data-position="fixed">
			<a href="#" data-icon="back" data-role="button" id="backButton">Back</a>
			<h1><%= IHISConstants.OWNERTYPE_PERSON == Integer.parseInt(ownerType) ? userName + "님의 일정 추이" : "조직 일정 추이" %></h1>
			<a href="#" data-icon="home" data-role="button" id="homeButton">Home</a>
		</div>

		<div data-role="content" style="height: 90%">
		    <div id="placeholder" style="width:98%;height:80%;"></div>

<%
	StringBuilder value = new StringBuilder();
	StringBuilder ucl = new StringBuilder();
	StringBuilder lcl = new StringBuilder();
	
	value.append("[");
	ucl.append("[");
	lcl.append("[");
	double uclValue = report.getUcl();
	double lclValue = report.getLcl();
	for(int i=0; i<values.size(); i++){
		PredictedCurve pc = values.get(i);
		
		if(i != 0){
			value.append(", ");
			ucl.append(", ");
			lcl.append(", ");
		}
		long time = pc.getMeasureDate().getTime();
		value.append("[").append("" + time).append(", ").append(pc.getValue()).append("]");
		ucl.append("[").append("" + time).append(", ").append(Double.toString(uclValue)).append("]");
		lcl.append("[").append("" + time).append(", ").append(Double.toString(lclValue)).append("]");
	}
	value.append("]");
	ucl.append("]");
	lcl.append("]");
%>

<script type="text/javascript">
$(function () {
    var value = <%= value.toString() %>;
    var ucl   = <%= ucl.toString() %>;
    var lcl   = <%= lcl.toString() %>;

    var placeholder = $("#placeholder");
    
    var plot = $.plot(placeholder, 
    		[
    		 	{ data: value, label: "Progress Ratio", lines: { show: true}, points: {show: true}},
    		 	{ data: ucl, label: "UCL"},
    		 	{ data: lcl, label: "LCL"}
    		],
    		{
    			xaxes: [ { mode: 'time'}]
    		}
    );
    
    placeholder.resize(function () {
        $(".message").text("Placeholder is now "
                           + $(this).width() + "x" + $(this).height()
                           + " pixels");
    });
});
</script>



			<%
				StringBuilder sb = new StringBuilder("Filter : ");
				if(!IHISUtil.isEmpty(startDate)){
					sb.append(startDate).append(" ");
				}
				if(!IHISUtil.isEmpty(endDate)){
					sb.append("~").append(endDate).append(" ");
				}
				if(!IHISUtil.isEmpty(user)){
					sb.append("/ ").append(userName).append("(").append(user).append(") " );
				}
				if(!IHISUtil.isEmpty(team)){
					sb.append("/ ").append(teamName).append(" ");
				}
				if(!IHISUtil.isEmpty(project)){
					sb.append("/ ").append(projectName).append(" ");
				}
				
			%>
			<h5><%= sb.toString() %></h5>
		</div> 

	<script type="text/javascript">
    	$(function(){
    		$("#searchButton").bind("click", function(){
				<% 
					StringBuilder url = new StringBuilder("searchSchedule.jsp?filterFor=predictedCurve");
					url.append("&periodType=").append("" + filter.getPeriodType());
					url.append("&ownerType=").append("" + filter.getOwnerType());

					if(filter.getStartDate() != null){
						url.append("&").append("startDate=").append(new SimpleDateFormat("yyyy-MM-dd").format(filter.getStartDate()));
					}
					if(filter.getEndDate() != null){
						url.append("&").append("endDate=").append(new SimpleDateFormat("yyyy-MM-dd").format(filter.getEndDate()));
					}
					if(!IHISUtil.isEmpty(filter.getUserId())){
						url.append("&").append("user=").append(filter.getUserId());
					}
					if(!IHISUtil.isEmpty(filter.getProjectId())){
						url.append("&").append("project=").append(filter.getProjectId());
					}
					if(!IHISUtil.isEmpty(filter.getTeamId())){
						url.append("&").append("team=").append(filter.getTeamId());
					}
				%>
				var url = "<%= url %>";
				document.location = url;
    		});
    	});
    	// 1. page 로 지정된 ID 값,  2.효과 3. 방향 :  false(>), true(<)
    </script>		
		
		<div data-role="footer" data-position="fixed">
			<a href="" id="searchButton" data-icon="check"  data-transition="slideup">Search</a>
			<a href="javascript:window.location.reload(true)" data-icon="refresh" data-rel="refresh" data-transition="flip">Refresh</a>
		</div>
		
	</div>
	
	<!-- 검색 정보를 저장해둔다. : Task 목록을 위해 사용 -->
	<div>
		<form action="#" method="post" name="filterForm">
			<input type="hidden" name="startDate" value="<%= startDate%>"/>
			<input type="hidden" name="endDate" value="<%= endDate%>"/>
			<input type="hidden" name="periodType" value="<%= periodType%>"/>
			<input type="hidden" name="user" value="<%= user%>"/>
			<input type="hidden" name="team" value="<%= team%>"/>
			<input type="hidden" name="ownerType" value="<%= ownerType%>"/>
			<input type="hidden" name="taskType" value=""/>
		</form>
	</div>
</body>
</html>